你所不知道的 URL

0.说明

第一幕

产品：大叔有用户反映账户不能绑定公众号。
大叔：啊咧咧？怎么可能，我看看？
大叔：恩？这也没问题啊，魏虾米。
大叔：还是没问题啊，挖叉类。
大叔：T T，话说产品姐姐是不是Java提供接口的时候，没有对URL进行encodeURI。
产品：啊咧咧？我问问看？

第二幕

大叔：翔逼你给我过来！
翔逼：啊咧咧？怎么了大叔？
大叔：知道在URL中的+有时候会变成什么吗？
翔逼：啊咧咧？不是+吗？
大叔：知道在URL中的空格有时候会变成什么吗？
翔逼：啊咧咧？不是空格吗？
大叔：还不赶快自己去查查看！别也成了挖坑型选手。

1.杀手兄弟 - 加号与空格

0.说明

中关于百分号编码中有段说明。

当HTML表单中的数据被提交时，表单的域名与值被编码并通过HTTP的GET或者POST方法甚至更古远的email把请求发送给服务器。这里的编码方法采用了一个非常早期的通用的URI百分号编码方法，并且有很多小的修改如新行规范化以及把空格符的编码"%20"替换为"+" . 按这套方法编码的数据的MIME类型是application/x-www-form-urlencoded, 当前仍用于（虽然非常过时了）HTML与XForms规范中. 此外，CGI规范包括了web服务器如何解码这类数据、利用这类数据的内容。

1.GET - 简单的在浏览器中测试

URL带有加号

在浏览器里输入URL https://www.baidu.com/s?wd=翔逼+大叔，这时候百度搜索框中出现的是翔逼 大叔，搜索框中+神奇的变成了空格。

URL带有空格

在浏览器里输入URL https://www.baidu.com/s?wd=翔逼 大叔，这时候百度搜索框中出现的是翔逼 大叔，URL中空格的变成%20。

URL带有%2B

在浏览器里输入URL https://www.baidu.com/s?wd=翔逼%2B大叔，这时候百度搜索框中出现的是翔逼+大叔，搜索框中%2B的变成+。

2.POST - 简单的PHP测试

代码

<?php echo $_POST['word'];

POSTMAN 发送请求

POST /1.php HTTP/1.1Host: 127.0.0.1Cache-Control: no-cache Postman-Token: fed5740c-aceb-0f57-edc9-cf42a275b35a Content-Type: application/x-www-form-urlencoded word=%2B%2B%2B+%2B%2B%2B

输出

+++ +++

2.孕妇 - URL中的URL

0.说明

在社交登录或微信公众号等时候，我们常常会在URL中使用到回调地址来处理验证成功后的页面跳转。

例如:

• 回调地址为：lionis.taroball.com?username=lionis&sex=man

• 这时候在URL中附加回调信息时

• 地址变为www.xxx.com?redirect=lionis.taroball.com?username=lionis&sex=man。

这个时候尴尬的问题出现了，sex=man在这个时候变成了www.xxx.com的参数了，而不是lionis.taroball.com的参数了。

这个时候就需要对回调信息进行encodeURL。

1.代码

<?php
// 文件名为test.php
echo $_GET['redirect'];

2.有 encodeURL

URL

localhost/test.php?redirect=lionis.taroball.com%3Fusername%3Dlionis%26sex%3Dman

输出

lionis.taroball.com?username=lionis&sex=man

3.无 encodeURL

URL

localhost/test.php?redirect=lionis.taroball.com?username=lionis&sex=man

输出

lionis.taroball.com?username=lionis

3.结论

GET

• 如果想在URL中使用+需要对URL进行encodeURL,把+编码成%2B。

• 在服务端渲染页面的时候，对URL需要encodeURL。

• 在客户端发送请求的时候，javascript需要使用正则来进行替换。

• 在服务端接受参数的时候，对关键字使用decodeURL。

• 对于URL中的URL也需要进行encodeURL

POST

• POST的Content-Type默认是application/x-www-form-urlencoded，顾名思义对URL进行了encodeURL。

• 想要了解更多有关POST可以看我之前写的。

【读书会送书活动进行中】

一、[活动]《CSS揭秘》签名版等您拿，第二期读书会来啦！

【您可能感兴趣的文章】

一、正则之基本入门

二、你所不知道的 Console

三、谈谈React

四、[Javascript] 关于 JS 中的浅拷贝和深拷贝

五、准时！英国维珍集团大老给上班族的唯一忠告

六、前端知识普及之页面加载

七、[Node.js] 理解 Node.js 事件驱动

八、浏览器的缓存

九、iframe,我们来谈一谈

十、Sass 与 Compass 实战经验总结

前端圈--打造专业的前端技术会议

为web前端开发者提供技术分享和交流的平台

打造一个良好的前端圈生态，推动web标准化的发展

官网：http://fequan.com

微博：fequancom | QQ群：41378087

长按二维码关注我们

投稿：[e-mail]

赞助合作：[e-mail]